/* eslint-disable react/no-unused-state */
import React, { Component } from 'react';
import IceContainer from '@icedesign/container';
import { Button, Search, Grid,Radio, Checkbox } from '@icedesign/base';
import IceCard from '@icedesign/card';
import './TagTable.scss'

const { Row, Col } = Grid;
const { Group: RadioGroup } = Radio;
const { Group: CheckboxGroup } = Checkbox;

const timeArray = [
  {
    value: '今日',
    label: "今日"
  },{
    value: "24小时",
    label: "24小时"
  },{
    value: "2天",
    label: "2天"
  },{
    value: "3天",
    label: "3天"
  },{
    value: "7天",
    label: "7天"
  },{
    value: "10天",
    label: "10天"
  }
];

const articArray = [
  {
    value: '相似度',
    label: "相似度"
  },{
    value: "时间降序",
    label: "时间降序"
  },{
    value: "时间升序",
    label: "时间升序"
  },{
    value: "相似文章",
    label: "相似文章"
  },{
    value: "采集顺序",
    label: "采集顺序"
  }
];

const ResultArray = [
  {
    value: '正常信息',
    label: "正常信息"
  },{
    value: "精准信息",
    label: "精准信息"
  },{
    value: "疑似垃圾",
    label: "疑似垃圾"
  }
];

const ShareBoolArray = [
  {
    value: '显示',
    label: "显示"
  },{
    value: "不显示",
    label: "不显示"
  }
];

const MatchingArray = [
  {
    value: '按全文',
    label: "按全文"
  },{
    value: "按标题",
    label: "按标题"
  },{
    value: "按正文",
    label: "按正文"
  }
];

const SensitiveArray = [
  {
    value: '全部',
    label: "全部"
  },{
    value: "非敏感",
    label: "非敏感"
  },{
    value: "敏感",
    label: "敏感"
  }
];

const SimilarArray = [
  {
    value: '不合并',
    label: "不合并"
  },{
    value: "合并",
    label: "合并"
  }
];

const InvolveArray = [
  {
    value: '全部',
    label: "全部"
  },{
    value: "内容涉及",
    label: "内容涉及"
  },{
    value: "定位涉及",
    label: "定位涉及"
  }
];

const SourceArray = [
  {
    value: '全部',
    label: "全部"
  },{
    value: "省内",
    label: "省内"
  },{
    value: "省外",
    label: "省外"
  },{
    value: "贴吧",
    label: "贴吧"
  }
];

const SourceStyleArray = [
  {
    value: "全部",
    label: "全部(6786)",
    number:199,
  },{
    value: "微信",
    label: "微信(1689)",
    number:1689,
  },{
    value: "网站",
    label: "网站(97)",
    number:97,
  },{
    value: "论坛",
    label: "论坛(1992)",
    number:1992,
  },{
    value: "微博",
    label: "微博(187)",
    number:187,
  },{
    value: "新闻",
    label: "新闻(2478)",
    number:2478,
  },{
    value: "博客",
    label: "博客(345)",
    number:345,
  },{
    value: "客户端",
    label: "客户端(578)",
    number:578,
  },{
    value: "政务",
    label: "政务(12)",
    number:12,
  },{
    value: "报刊",
    label: "报刊(68)",
    number:68,
  },{
    value: "外媒",
    label: "外媒(907)",
    number:907,
  },{
    value: "视频",
    label: "视频(123)",
    number:123,
  }
];

export default class TagTable extends Component {
  static displayName = 'TagTable';

  static propTypes = {};

  static defaultProps = {};

  constructor(props) {
    console.log("props",props);
    super(props);
    this.state = {
      loading: false,
      iconLoading: false,
      playtime:'360',
      timeIndexSelcet:'今日',
      articList:'时间降序',
      ResultIndex:'正常信息',
      ShareBoolIndex:'显示',
      MatchingIndex:'按全文',
      SensitiveIndex:'全部',
      SimilarIndex:'不合并',
      InvolveIndex:'全部',
      SourceIndex:'全部',

      machineCode:'',
      startTime: null,
      endTime:null,
      page:null,
      pageSize:null,
      orderBy:null,
      sort:null,
      options:null,
      resultShow:null,
      comblineflg:null,
      showRootWb:null,
      isLocationAddress:null,
      matchType:null,
      provinces:null,
      excludeProvinces:null,
      origin:null,

      SelectSourceStyle:[],

      searchData:[],

    };
    this.onNormalChange = this.onNormalChange.bind(this);
    this.onArticChange = this.onArticChange.bind(this);
    this.onResultChange = this.onResultChange.bind(this);
    this.onShareBoolChange = this.onShareBoolChange.bind(this);
    this.onMatchingChange = this.onMatchingChange.bind(this);
    this.onSensitiveChange = this.onSensitiveChange.bind(this);
    this.onSimilarChange = this.onSimilarChange.bind(this);
    this.onInvolveChange = this.onInvolveChange.bind(this);
    this.onSourceChange = this.onSourceChange.bind(this);
    this.onSourceStyle = this.onSourceStyle.bind(this);
  }

  componentDidMount(){
    this.setState({
      searchData:this.props.searchData
    })
  }

  // 时间范围 事件
  onNormalChange(value) {
    this.setState({
      timeIndexSelcet: value
    });
    console.log("时间范围",value);
  }

  // 文章排序 事件
  onArticChange(value) {
    this.setState({
      articList: value
    });
    console.log("文章排序",value);
  }

  // 结果呈现 事件
  onResultChange(value) {
    this.setState({
      ResultIndex: value
    });
    console.log("结果呈现",value);
  }

  // 转发微博 事件
  onShareBoolChange(value) {
    this.setState({
      ShareBoolIndex: value
    });
    console.log("转发微博",value);
  }

  // 匹配方式 事件
  onMatchingChange(value) {
    this.setState({
      MatchingIndex: value
    });
    console.log("匹配方式",value);
  }

  // 敏感属性 事件
  onSensitiveChange(value) {
    this.setState({
      SensitiveIndex: value
    });
    console.log("敏感属性",value);
  }

  // 相似文章 事件
  onSimilarChange(value) {
    this.setState({
      SimilarIndex: value
    });
    console.log("相似文章",value);
  }

  // 涉及方式 事件
  onInvolveChange(value) {
    this.setState({
      InvolveIndex: value
    });
    console.log("涉及方式",value);
  }

  // 来源网站 事件
  onSourceChange(value) {
    this.setState({
      SourceIndex: value
    });
    console.log("来源网站",value);
  }

  // 来源类型（多选） 事件
  onSourceStyle(selectedItems) {
    this.setState({
      SelectSourceStyle: selectedItems
    });
  }

  // 查询
  GoSearch(){
    let SearchURL = this.state.timeIndexSelcet 
    + '/' + this.state.ResultIndex 
    + '/' + this.state.ShareBoolIndex
    + '/' + this.state.MatchingIndex 
    + '/' + this.state.SensitiveIndex
    + '/' + this.state.SimilarIndex 
    + '/' + this.state.InvolveIndex
    + '/' + this.state.SourceIndex
    + '/' + this.state.SelectSourceStyle

    console.log("搜索参数",SearchURL);
  }

  getDataSource = () => {
    const { formValue } = this.state;
    return dataSource.filter((data) => {
      // 预先筛除
      if (formValue.name && !data.name.match(formValue.name)) {
        return false;
      }

      if (
        formValue.isHandle &&
        ((formValue.isHandle === 'YES' && data.assets.unHandle) ||
          (formValue.isHandle === 'NO' && !data.assets.unHandle))
      ) {
        return false;
      }

      if (
        formValue.levels &&
        !formValue.levels.some((l) => {
          return l === data.level;
        })
      ) {
        return false;
      }

      return true;
    });
  };

  enterLoading() {
    this.setState({ loading: true });
  }
  enterIconLoading() {
    this.setState({ iconLoading: true });
  }

  componentWillReceiveProps(){
    // this.props.handleChildValueChange(localStorage.getItem('machineCode'),this.state.startTime,this.state.endTime,this.state.page,this.state.pageSize,this.state.orderBy,this.state.sort,this.state.options,this.state.resultShow,this.state.comblineflg,this.state.showRootWb,this.state.isLocationAddress,this.state.matchType,this.state.provinces,this.state.excludeProvinces,this.state.origin);
    // console.log("props变化",this.state.searchData);
  }

  render() {
    return (
      <div className="tag-table">
        {/* <IceContainer>

        </IceContainer> */}
        <IceCard style={{width:'100%'}}>
          <Row>
            <Col l="24" className="search-box">
              <Search
                className="search"
                searchText="搜索"
                placeholder="配置您想搜索的关键词(用逗号隔开)"
                // style={{backgroundColor:'#fbfbfc'}}
              />
              {/* <Button type="primary" loading={this.state.loading} onClick={this.enterLoading.bind(this)} style={{display:'inherit',padding:'0 20px'}}>
                <span style={{ float:'left'}}>待生效时间</span> <span style={{ float:'left'}}>:{this.state.playtime}</span>
              </Button> */}
            </Col>
          </Row>
          <div style={{display:'inline-flex',width:'100%',padding: '0 50px'}}>
            <Col s="12" xxs="24">
            {/* <FormBinderWrapper value={formValue} onChange={this.formChange}> */}
              <div>
                <Row style={styles.formRow}>
                  <Col xxs="6" s="4" l="3" style={styles.label}>
                    <span className="col-content-font">时间范围</span>
                  </Col>
                  <Col span="16">
                    <RadioGroup
                      dataSource={timeArray}
                      shape="button"
                      size="medium"
                      value={this.state.timeIndexSelcet}
                      onChange={this.onNormalChange}
                    />
                  </Col>
                </Row>
                <Row style={styles.formRow}>
                  <Col xxs="6" s="4" l="3" style={styles.label}>
                    <span className="col-content-font">文章排序</span>
                  </Col>
                  <Col span="16">
                    <RadioGroup
                      dataSource={articArray}
                      shape="button"
                      size="medium"
                      value={this.state.articList}
                      onChange={this.onArticChange}
                      className = "col-content-font"
                    />
                  </Col>
                </Row>
                <Row style={styles.formRow}>
                  <Col xxs="6" s="4" l="3" style={styles.label}>
                    <span className="col-content-font">结果呈现</span>
                  </Col>
                  <Col span="10">
                    <RadioGroup
                      dataSource={ResultArray}
                      shape="button"
                      size="medium"
                      value={this.state.ResultIndex}
                      onChange={this.onResultChange}
                    />
                  </Col>
                </Row>
                <Row style={styles.formRow}>
                  <Col xxs="6" s="4" l="3" style={styles.label}>
                    <span className="col-content-font">转发微博</span>
                  </Col>
                  <Col span="10">
                    <RadioGroup
                      dataSource={ShareBoolArray}
                      shape="button"
                      size="medium"
                      value={this.state.ShareBoolIndex}
                      onChange={this.onShareBoolChange}
                    />
                  </Col>
                </Row>
                <Row style={styles.formRow}>
                  <Col xxs="6" s="4" l="3" style={styles.label}>
                    <span className="col-content-font">配置方式</span>
                  </Col>
                  <Col span="10">
                    <RadioGroup
                      dataSource={MatchingArray}
                      shape="button"
                      size="medium"
                      value={this.state.MatchingIndex}
                      onChange={this.onMatchingChange}
                    />
                  </Col>
                </Row>
              </div>
            {/* </FormBinderWrapper> */}
          </Col>
          <Col s="12" xxs="24">
          {/* <FormBinderWrapper value={formValue} onChange={this.formChange}> */}
              <div>
                <Row style={styles.formRow}>
                  <Col xxs="6" s="4" l="3" style={styles.label}>
                    <span className="col-content-font">敏感属性</span>
                  </Col>
                  <Col span="16">
                    <RadioGroup
                      dataSource={SensitiveArray}
                      shape="button"
                      size="medium"
                      value={this.state.SensitiveIndex}
                      onChange={this.onSensitiveChange}
                      className = "col-content-font"
                    />
                  </Col>
                </Row>
                <Row style={styles.formRow}>
                  <Col xxs="6" s="4" l="3" style={styles.label}>
                    <span className="col-content-font">相似文章</span>
                  </Col>
                  <Col span="10">
                    <RadioGroup
                      dataSource={SimilarArray}
                      shape="button"
                      size="medium"
                      value={this.state.SimilarIndex}
                      onChange={this.onSimilarChange}
                    />
                  </Col>
                </Row>
                <Row style={styles.formRow}>
                  <Col xxs="6" s="4" l="3" style={styles.label}>
                    <span className="col-content-font">涉及方式</span>
                  </Col>
                  <Col span="10">
                    <RadioGroup
                      dataSource={InvolveArray}
                      shape="button"
                      size="medium"
                      value={this.state.InvolveIndex}
                      onChange={this.onInvolveChange}
                    />
                  </Col>
                </Row>
                <Row style={styles.formRow}>
                  <Col xxs="6" s="4" l="3" style={styles.label}>
                    <span className="col-content-font">来源网站</span>
                  </Col>
                  <Col span="10">
                    <RadioGroup
                      dataSource={SourceArray}
                      shape="button"
                      size="medium"
                      value={this.state.SourceIndex}
                      onChange={this.onSourceChange}
                    />
                  </Col>
                </Row>
              </div>
            {/* </FormBinderWrapper> */}
          </Col>
        </div>
        <div style={{ width:'100%',display:'block',padding: '0 50px'}}>
          <Row style={styles.formRow}>
            <Col xxs="6" s="4" l="3" style={styles.label}>
              <span className="col-content-font">来源类型(多选)</span>
            </Col>
            <Col s="22" xxs="20">
              <div style={{ lineHeight: '28px' }}>
              <CheckboxGroup value={this.state.SelectSourceStyle} dataSource={SourceStyleArray} onChange={this.onSourceStyle}>
              { SourceStyleArray.map((item,i) => {
                return (
                  <Checkbox id={item.value} key={i} value={item.value}>
                    <span className="next-checkbox-label">{item.label}</span>
                  </Checkbox>
                  )
              })}
              </CheckboxGroup>
              </div>
            </Col>
          </Row>
        </div>
        <div style={{ width:'100%',display:'block',textAlign:'center',padding:'20px 0'}}>
          <Button type="primary" onClick={this.GoSearch.bind(this)} style={{ width:'180px',height:'40px'}}>
            查询
          </Button>
        </div>
        </IceCard>
      </div>
    );
  }
}

const styles = {
  formRow: {
    fontSize:'14px',
    marginTop:'10px',
    paddingBottom: '8px',
    borderBottom: '1px solid #f1f1f1',
  },
  label: { lineHeight: '28px', paddingRight: '10px' },
};
